<script setup>
import {ref,defineModel,defineProps,defineEmits} from "vue"

let dialogFormVisible = defineModel({required: true})
let props = defineProps({
    title:{
        type:String,
        default: ''
    },
    width:{
        type: String,
        default: '500'
    }
})

const emits = defineEmits(['cancel','submit'])

const onCancel = () =>{
    dialogFormVisible.value = false,
    emits('cancel')    // emits 是 vue 组件中用于触发自定义事件的方法
}

const onSubmit = () =>{
    emits('submit');
}

</script>


<template>
    <el-dialog v-model="dialogFormVisible" :title="props.title" :width="props.width">
        <slot></slot>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="onCancel">取消</el-button>
                <el-button type="primary" @click="onSubmit">确认</el-button>
            </div>

        </template>

    </el-dialog>


</template>

<style scoped></style>